<template>
<input
  type="checkbox"
  :checked="checked"
  @change="$emit('change', $event.target.checked)"
>
</template>

<script>
export default {
  name: 'app-switch',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  }
}
</script>

<style lang="stylus">
input[type="checkbox"]
  all unset
  cursor pointer
  position relative
  display inline-block
  width 28px
  height 12px
  border-radius 6px
  background-color #bdc1c6
  transition all .1s ease-in
  &::before
    content ''
    position absolute
    top -2px
    left -2px
    width 16px
    height 16px
    border-radius 8px
    background-color #fff
    box-shadow 0 1px 3px 0 rgba(0, 0, 0, .4)
    transition all .1s ease-in
  &:checked
    background-color #9db4f2
  &:checked::before
    left 14px
    background-color #1973e8
</style>